import { useRef, useState, useEffect, forwardRef, useImperativeHandle } from 'react';
import './userWorker';
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';

export default forwardRef(function EditorView (props, ref) {
	const [editor, setEditor] = useState<monaco.editor.IStandaloneCodeEditor | null>(null);
	const monacoEl = useRef(null);

	useEffect(() => {
		if (monacoEl && !editor) {
			const ed = monaco.editor.create(monacoEl.current!, {
				value: 'self{\n}',
				language: 'css'
			})
			setEditor(ed);
		}

		return () => editor?.dispose();
	}, [monacoEl.current]);

    useImperativeHandle(ref, () => ({
        getValue: () => {
            return editor.getValue();
        }
    }))

	return <div style={{ width: '100%', height: '100%' }} ref={monacoEl}></div>;
});
